<template>
	<div class="loginbox">
		<div class="login">
			<el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="130px"
				class="demo-ruleForm">
				<el-form-item label="用户名" prop="username">
					<el-input v-model="ruleForm.username" type="text" autocomplete="off" />
				</el-form-item>
				<el-form-item label="密码" prop="checkPass">
					<el-input v-model="ruleForm.password" type="text" autocomplete="off" />
				</el-form-item>
				<el-form-item label="验证码" prop="captcha">
						<el-space>
							<el-input v-model="ruleForm.captcha" />
							<div @click="changeCaptchaFn">
								<img :src="captchaImg" alt="">
							</div >
						</el-space>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import {useRouter} from "vue-router";
import { getcaptcha ,loginApi} from '@/api/http'

const captchaImg = ref('')
const key = ref('')
getcaptcha().then(res => {
	console.log(res);
	captchaImg.value = res.data.img
	key.value = res.data.key
})
const changeCaptchaFn = () => {
	getcaptcha().then(res => {
	console.log(res);
	captchaImg.value = res.data.img
	key.value = res.data.key
})
}


const ruleFormRef = ref()
const ruleForm = reactive({
	username: '',
	password: '',
	key: '',
	captcha: ''
})

const rules = reactive({
	username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
	password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
	captcha: [{ required: true, message: '请输入验证', trigger: 'blur' }],
})

const router = useRouter()

const submitForm = (formEl) => {
	if (!formEl) return
	formEl.validate((valid) => {
		if (valid) {
			ruleForm.key = key.value
			loginApi(ruleForm).then (res => {
				console.log('res',res);
			if (res.data.errNo == 0) {
localStorage.setItem('jwt',res.data.context.jwt)
localStorage.setItem('acl',JSON.stringify(res.data.context.acl))

router.push('/dashboard')
}
			})
			console.log(ruleForm);
		} else {
			console.log('error submit!')
			return false
		}
	})
}

const resetForm = (formEl) => {
	if (!formEl) return
	formEl.resetFields()
}
</script>

<style scoped lang="scss">
.loginbox {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;

	.login {
		width: 350px;
	}
}
</style>